<template>
	<view class="my-page">
		<!-- 红色头部区域 -->
		<view class="header-section">

			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="avatar-section" @click="toSetting">
					<image :src="Userinfo.avatar || '/static/logo.png'" mode="aspectFill" class="user-avatar"></image>
				</view>
				<view class="user-details">
					<view class="user-name">
						<text class="name-text">{{ Userinfo.nickname || '未设置昵称' }}</text>
						<image v-if="Userinfo.vip" src="/static/vip.png" mode=""></image>
					</view>
					<text class="user-id">ID:{{ Userinfo.id || '未知' }}</text>
				</view>
			</view>
		</view>

		<!-- 会员横幅 -->
		<view class="member-banner" v-if="Userinfo.vip">
			<view class="banner-content">
				<image src="/static/vip.png" mode=""></image>
				<view class="member-info">
					<text class="member-title">您已开通会员</text>
					<text class="member-expire">{{ formatVipDeadline(Userinfo.vipDeadline) }}</text>
				</view>
				<view class="activate-btn" @click="toVipPage">
					<text class="btn-text">续费</text>
				</view>
			</view>
		</view>

		<!-- 非会员横幅 -->
		<view class="member-banner" v-else>
			<view class="banner-content">
				<image src="/static/vip.png" mode=""></image>
				<view class="member-info">
					<text class="member-title">开通会员享受更多优惠</text>
					<text class="member-expire">立即开通会员</text>
				</view>
				<view class="activate-btn" @click="toVipPage">
					<text class="btn-text">立即开通</text>
				</view>
			</view>
		</view>

		<!-- 订单和钱包卡片 -->
		<view class="cards-section">
			<view class="order-card" @click="toMyOrders">
				<view class="card-header flex-center-between">
					<text class="card-title">我的订单</text>
					<u-icon name="arrow-right" size="16" color="#DB0000"></u-icon>
				</view>
				<view class="flex-center-between">
					<text class="card-subtitle">查看订单</text>

					<view class="card-action">
						<text class="action-text">查看</text>
					</view>
				</view>
			</view>

			<view class="wallet-card" @click="toMyWallet">
				<view class="card-header flex-center-between">
					<text class="card-title">我的钱包</text>
					<u-icon name="arrow-right" size="16" color="#DB0000"></u-icon>
				</view>
				<view class="flex-center-between">
					<text class="wallet-amount">{{ Userinfo.amount || '0.00' }}</text>
					<view class="card-action">
						<text class="action-text">充值</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" v-for="(item, index) in functionMenuList" :key="index"
				@click="handleMenuClick(item)">
				<image :src="item.icon" mode=""></image>
				<text class="function-text">
					{{ item.text }}
					<text v-if="item.text === '我的积分'" class="points-count">：{{ Userinfo.points || '0' }}</text>
				</text>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>

		<!-- 商家信息 -->
		<!-- <view class="merchant-info">
			<view class="merchant-item">
				<image src="/static/my/f1.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<text class="merchant-label">商家店名</text>
				<text class="merchant-value">{{ storeInfo.store_name || '加载中...' }}</text>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>

			<view class="merchant-item" @click="makePhoneCall">
				<image src="/static/my/f2.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<text class="merchant-label">商家电话</text>
				<text class="merchant-value">{{ storeInfo.store_tel || '加载中...' }}</text>
				<image src="/static/my/pone.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>

			<view class="merchant-item" @click="openMap">
				<image src="/static/my/f3.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<text class="merchant-label">店铺地址</text>
				<text class="merchant-address">{{ storeInfo.store_address || '加载中...' }}</text>
				<image src="/static/my/map.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
			getUserInfo
		} from "@/api/user.js"
	import {
		systemConfig
	} from "@/api/index.js"
	export default {
		data() {
			return {
				// 功能菜单列表
				functionMenuList: [{
						icon: '/static/my/m1.png',
						text: '我的积分',
						url: '/pagesB/points/points',
						type: 'navigate'
					},
					{
						icon: '/static/my/m2.png',
						text: '我的优惠券',
						url: '/pagesB/coupon/coupon',
						type: 'navigate'
					},
					{
						icon: '/static/my/m3.png',
						text: '商城订单',
						url: '/pagesB/product_order/myorder',
						type: 'navigate'
					},
					{
						icon: '/static/my/m4.png',
						text: '我的预定',
						url: '/pagesB/reservation/my-reservation',
						type: 'navigate'
					},
					{
						icon: '/static/my/m5.png',
						text: '设置',
						url: '/pagesB/setting/setting',
						type: 'navigate'
					}
				],
				// 商店信息
				storeInfo: {
					store_name: '加载中...',
					store_address: '加载中...',
					store_tel: '加载中...',
					store_location: ''
				}
			}
		},
		computed: {
			Userinfo() {
				this.userinfo = this.$store.state.userinfo;
				return this.$store.state.userinfo;
			}
		},
		onLoad() {
			// 页面加载
			// 获取系统配置
			// this.getsisteminfo();
		},
		onShow() {
			// 页面显示
			this.getuserInfo();
		},
		methods: {
			//获取用户信息
			getuserInfo() {
				getUserInfo({
					userId:this.$store.state.userid 
				}).then(res => {
					this.$store.commit('setUserinfo', res.data);
				})
			},
			// 获取系统配置信息
			getsisteminfo() {
				// 获取商店名称
				systemConfig({
					key: 'store_name'
				}).then(res => {
					if (res.code == 200) {
						this.storeInfo.store_name = res.data || '未知店铺';
					}
				}).catch(err => {
					console.error('获取商店名称失败:', err);
				});
				
				// 获取商店地址
				systemConfig({
					key: 'store_address'
				}).then(res => {
					if (res.code == 200) {
						this.storeInfo.store_address = res.data || '未知地址';
					}
				}).catch(err => {
					console.error('获取商店地址失败:', err);
				});
				
				// 获取商店电话
				systemConfig({
					key: 'store_tel'
				}).then(res => {
					if (res.code == 200) {
						this.storeInfo.store_tel = res.data || '未知电话';
					}
				}).catch(err => {
					console.error('获取商店电话失败:', err);
				});
				
				// 获取商店位置
				systemConfig({
					key: 'store_location'
				}).then(res => {
					if (res.code == 200) {
						this.storeInfo.store_location = res.data || '';
					}
				}).catch(err => {
					console.error('获取商店位置失败:', err);
				});
			},
			// 格式化VIP过期时间
			formatVipDeadline(vipDeadline) {
				if (!vipDeadline) return '未知';
				const date = new Date(vipDeadline);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}到期`;
			},

			// 统一的菜单点击处理方法
			handleMenuClick(item) {
				if (item.type === 'navigate') {
					uni.navigateTo({
						url: item.url
					})
				} else if (item.type === 'switchTab') {
					uni.switchTab({
						url: item.url
					})
				} else if (item.type === 'function') {
					// 执行自定义函数
					if (item.method && typeof this[item.method] === 'function') {
						this[item.method]()
					}
				}
			},

			// 跳转我的订单
			toMyOrders() {
				uni.navigateTo({
					url: '/pagesA/my-orders/my-orders'
				})
			},

			// 跳转我的钱包
			toMyWallet() {
				uni.navigateTo({
					url: '/pagesB/wallet/wallet'
				})
			},

			// 跳转设置页面
			toSetting() {
				uni.navigateTo({
					url: '/pagesB/setting/setting'
				})
			},

			// 跳转会员页面
			toVipPage() {
				uni.navigateTo({
					url: '/pagesB/vip/vip'
				})
			},

			// 拨打电话
			makePhoneCall() {
				if (!this.storeInfo.store_tel || this.storeInfo.store_tel === '加载中...' || this.storeInfo.store_tel === '未知电话') {
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none'
					});
					return;
				}
				
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.store_tel
				});
			},

			// 打开地图导航
			openMap() {
				if (!this.storeInfo.store_address || this.storeInfo.store_address === '加载中...' || this.storeInfo.store_address === '未知地址') {
					uni.showToast({
						title: '暂无地址信息',
						icon: 'none'
					});
					return;
				}
				
				// 检查是否有位置坐标信息
				if (!this.storeInfo.store_location) {
					uni.showToast({
						title: '暂无位置坐标信息',
						icon: 'none'
					});
					return;
				}
				
				// 解析经纬度
				const locationArray = this.storeInfo.store_location.split(',');
				if (locationArray.length !== 2) {
					uni.showToast({
						title: '位置坐标格式错误',
						icon: 'none'
					});
					return;
				}
				
				const latitude = parseFloat(locationArray[1]); // 纬度
				const longitude = parseFloat(locationArray[0]); // 经度
				
				// 验证经纬度是否有效
				if (isNaN(latitude) || isNaN(longitude)) {
					uni.showToast({
						title: '位置坐标无效',
						icon: 'none'
					});
					return;
				}
				
				// 使用uni.openLocation打开系统地图
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: this.storeInfo.store_name || '店铺位置',
					address: this.storeInfo.store_address,
					success: (res) => {
						console.log('打开系统位置地图成功');
					},
					fail: (error) => {
						console.error('打开地图失败:', error);
						uni.showToast({
							title: '打开地图失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
		padding-bottom: 100rpx;
	}

	// 红色头部区域
	.header-section {
		background-color: #DB0000;
		padding: 188rpx 20rpx 40rpx;

		.header-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.page-title {
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: 400;
			}

			.header-actions {
				display: flex;
				gap: 20rpx;
			}
		}

		.user-info {
			display: flex;
			align-items: center;

			.avatar-section {
				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}
			}

			.user-details {
				flex: 1;
				padding-left: 20rpx;

				.user-name {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-bottom: 10rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					.name-text {
						font-size: 36rpx;
						color: #FFFFFF;
						font-weight: 400;
					}
				}

				.user-id {
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 400;
				}
			}
		}
	}

	// 会员横幅
	.member-banner {
		background: linear-gradient(90deg, #FAE0A5 17%, #FFD78C 77%, #FFCC80 100%);
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 24rpx;

		.banner-content {
			display: flex;
			align-items: center;
			gap: 20rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			.member-info {
				flex: 1;

				.member-title {
					display: block;
					font-size: 38rpx;
					color: #A66E1F;
					font-weight: 400;
					margin-bottom: 10rpx;
				}

				.member-expire {
					font-size: 26rpx;
					color: #A66E1F;
					font-weight: 400;
				}
			}

			.activate-btn {
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 100rpx;
				padding: 12rpx 24rpx;

				.btn-text {
					font-size: 26rpx;
					color: #A66E1F;
					font-weight: 400;
				}
			}
		}
	}

	// 订单和钱包卡片
	.cards-section {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.order-card,
		.wallet-card {
			width: 49%;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			.card-header {
				display: flex;
				align-items: center;
				gap: 10rpx;
				margin-bottom: 20rpx;

				.card-title {
					font-size: 30rpx;
					color: #333333;
					font-weight: 400;
				}
			}

			.card-subtitle {
				display: block;
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 20rpx;
			}

			.wallet-amount {
				display: block;
				font-size: 36rpx;
				color: #333333;
				font-weight: 400;
				margin-bottom: 20rpx;
			}

			.card-action {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.action-text {
					background-color: #DB0000;
					color: #FFFFFF;
					font-size: 26rpx;
					padding: 8rpx 24rpx;
					border-radius: 16rpx;
				}
			}
		}
	}

	// 功能列表
	.function-list {
		background-color: #FFFFFF;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.function-item {
			display: flex;
			align-items: center;
			padding: 32rpx 20rpx;
			border-bottom: 2rpx solid #F7F5F2;

			image {
				width: 45rpx;
				height: 45rpx;
			}

			&:last-child {
				border-bottom: none;
			}

			.function-text {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
				margin-left: 20rpx;

				.points-count {
					color: #DB0000;
					font-weight: 500;
				}
			}
		}
	}

	// 商家信息
	.merchant-info {
		background-color: #FFFFFF;
		margin: 0 20rpx;
		border-radius: 20rpx;
		padding: 32rpx 20rpx;

		.merchant-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #EEEEEE;

			&:last-child {
				border-bottom: none;
			}

			.merchant-label {
				font-size: 28rpx;
				color: #2E343A;
				font-weight: 400;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.merchant-value {
				flex: 1;
				font-size: 28rpx;
				color: #383838;
				font-weight: 400;
				text-align: right;
				margin-right: 20rpx;
			}

			.merchant-address {
				flex: 1;
				font-size: 28rpx;
				color: #383838;
				font-weight: 400;
				text-align: right;
				margin-right: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>